<!--  -->
<template>
<div class=''>
  <!-- 面包屑导航栏 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片视图区 -->
  <el-card>
    <el-table stripe border :data="rightsList">
      <el-table-column type="expand" ></el-table-column>
      <el-table-column type="index" ></el-table-column>
      <el-table-column label="权限名称" prop="authName" ></el-table-column>
      <el-table-column label="路径" prop="path"></el-table-column>
      <el-table-column label="权限等级" prop="level">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level==1">一级</el-tag>
          <el-tag v-else-if="scope.row.level==2" type="success">二级</el-tag>
          <el-tag v-else="scope.row.level==3" type="warning">三级</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name:'HomeRights',
 components: {},
 data() {
   return {
    rightsList:null,
   };
 },
 computed: {},
 //监控data中的数据变化
 watch: {},
 //生命周期 - 创建完成（可以访问当前this实例）
 created() {
   this.getRightsList()
 },
 //生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {
   
 },
 methods: {
  async getRightsList(){
    let {data:res} =  await this.$http.get('rights/list')
    if(res.meta.status!==200) return this.$message.error(res.meta.msg);
    this.rightsList = res.data;    
  }
 },
}
</script>
<style scoped>
</style>